import {Euler, EventDispatcher, Vector3, Spherical} from 'three';
import * as THREE from "three";

var Pano = function (camera, domElement) {
  function saveImage(fileName) {
    const image = new Image();
    const base64 = canvas.toDataURL("image/webp", .1);
    image.src = base64;
    const a = document.createElement('a');
    a.href = base64;
    a.download = fileName || '图片名字';
    a.click();
  }

  domElement.ownerDocument.onclick = () => {
    // return
    const deg = [
      {x: 90, y: 0, z: 0, fileName: 'O1_u'},
      {x: -90, y: 0, z: 0, fileName: 'O1_d'},
      {x: 0, y: -90, z: 0, fileName: 'O1_f'},
      {x: 0, y: 90, z: 0, fileName: 'O1_b'},
      {x: 0, y: 0, z: 0, fileName: 'O1_r'},
      {x: 0, y: 180, z: 0, fileName: 'O1_l'},
    ]
    let count = 0

    function fun(params) {
      euler.set(THREE.MathUtils.degToRad(params.x), THREE.MathUtils.degToRad(params.y), THREE.MathUtils.degToRad(params.z), 'XYZ')
      camera.quaternion.setFromEuler(euler);
      console.log(JSON.stringify(euler))
      setTimeout(() => {
        saveImage(deg[count].fileName)
        if (deg[++count]) fun(deg[count])
      }, 100)
    }

    fun(deg[0])
  };
}

Pano.prototype = Object.create(EventDispatcher.prototype);
Pano.prototype.constructor = Pano;

export {Pano};
